<template>
  <!-- 添加或修改盘点计划对话框 -->
  <el-dialog :title="title" v-if="open" v-model="open" width="1000px" append-to-body>
    <div v-loading="loading" style="max-width: 1000px">
      <ClueProgress style="padding-left: 40px;" :steps="info.jzgFollowStageVoList" :initial-step="currentStep"></ClueProgress>
      <el-timeline style="max-width: 1000px;min-height: 500px;">
        <el-timeline-item hide-timestamp color="blue" placement="top" v-for="(item, index) in followOrderList "
          :key="index">
          <!-- 自定义时间戳标题 -->
          <div class="timestamp">
            {{ item.followDate.substring(0, 10) }}
          </div>
          <el-card class="task-card">
            <el-container>
              <el-header>
                <el-row>
                  <el-col :span="2">
                    <el-avatar shape="square" :size="50" :src="item.avatarUrl" />
                  </el-col>
                  <el-col :span="16">
                    <p class="userName">{{ item.followUserNickName }}</p>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="info" text="info"
                      v-show="getFollowStageAudit(item.followStageId) === '1' && item.auditStatus == 1">已审核</el-button>
                    <el-button type="text" v-show="getFollowStageAudit(item.followStageId) === '1' && item.auditStatus == null
                      && item.followStageAuditUserId == userId" @click="handleAudit(item)">审核</el-button>
                    <el-button type="text" @click="handleStatus(item)">详情</el-button>
                    <el-button type="text" @click="handleDelete(item)" v-hasPrime="['order:followorder:remove']">删除</el-button>
                  </el-col>
                  <el-col :span="2">
                    <el-tag size="large" type="primary">
                      {{ getFollowStageName(item.followStageId) }}
                    </el-tag>
                  </el-col>
                </el-row>
              </el-header>
              <el-main style="font-size:18px">{{ item.comment }}</el-main>
              <el-footer>
                <p></p>
              </el-footer>
            </el-container>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel">确定</el-button>
        <!-- <el-button type="primary" @click="submitForm" :loading="loading">确定</el-button> -->
      </div>
    </template>
</el-dialog>
<!-- <statusForm ref="statusForm"></statusForm>
<auditForm ref="auditForm" @ok="selectOk"></auditForm> -->
</template>

<script>
import request from '@/utils/request';
import modelMixin from '@/mixins/modelMixin'
import { listFollowStage } from '@/api/goods/followStage';
import followOrder from '@/api/goods/followOrder'
// import statusForm from './statusForm.vue';
// import auditForm from './auditForm.vue';

import ClueProgress from '@/views/goods/tracking/components/clue-progress.vue';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
export default {
  name: 'addForm',
  mixins: [modelMixin],
  components: { 
    ClueProgress, },
  data() {
    return {
      open: false,
      funcObj: followOrder,
      followOrderList: [],
      active: 3,
      followStage: [],
      title: '进展详情',
      loading: false,
      followOrderId: '',
      userId: userStore.userId,
      info:{},
      urls: {
        delete: '/order/followOrder'
      }
    };
  },
  computed: {
    currentStep() {
      let index = this.info.jzgFollowStageVoList.findIndex((item) => item.id == this.info.followStageId);
      console.log('index',index);
      return index;
    },
  },
  methods: {
    detail(row) {
      this.info = row;
      this.info.jzgFollowStageVoList.sort((a, b) =>{
        const getNum = (val)=>{
          return +(val.replace('%',''))
        }
        return getNum(a.progressCoefficient) - getNum(b.progressCoefficient)
      })
      console.log('this.info.jzgFollowStageVoList',this.info.jzgFollowStageVoList);
      this.open = true;
      this.loading = true
      this.followOrderList = []
      this.followOrderId = ''
      this.dataSource = []
      listFollowStage().then(res => {
        this.followStage = res.rows
      })
      this.followOrderId = { clueId: row.id }
      followOrder.list(this.followOrderId).then(res => {
        this.followOrderList = res.rows
        this.loading = false
      })
      console.log('this.userId :>> ', this.userId);

    },
    detailAfter() {
      this.dataSource = this.form.quotationItemVoList.map(v => {
        return {
          ...v,
          packImg: v.jzgGoodsVo && v.jzgGoodsVo.packImg || '',
          goodsName: v.jzgGoodsVo && v.jzgGoodsVo.goodsName || '',
          brandName: v.jzgGoodsVo && v.jzgGoodsVo.brandName || '',
        }
      })
    },
    
    // 获取报价单号
    addInit() {
      getQuotationCode().then(res => {
        this.form.quotationCode = res.data || res.msg;
      })
    },
    cancel() {
      this.open = false;
    },
    categoryChange(value) {
      this.form.categoryId = value;
    },
    handleSelectionChange(val) {
      this.multiple = val.length > 1;
    },
    selectHandle(row) {
      return 1;
    },
    handleAdd() {
      this.$refs.selectMaterialForm.show();
    },
    getFollowStageName(value) {
      if (value) {
        let followStageItem = this.followStage.find(array => array.id === value)
        return followStageItem && followStageItem.name || ''
      }
    },
    getFollowStageAudit(value) {
      console.log('value :>> ', value);
      if (value) {
        let followStageItem = this.followStage.find(array => array.id === value)
        return followStageItem && followStageItem.status || ''
      }
    },
    handleStatus(row) {
      this.$refs.statusForm.view(row);
    },
    handleDelete(row) {
      console.log('row :>> ', row);
      this.$modal.confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: this.urls.delete + '/' + row.id,
          method: 'delete'
        }).then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess('删除成功')
            this.selectOk()
          } else {
            this.$modal.msgError(res.msg)
          }
        });
      }).catch(() => { });
    },
    handleAudit(row) {
      this.$refs.auditForm.edit(row);
    },
    selectOk() {
      this.loading = true
      followOrder.list(this.followOrderId).then(res => {
        this.followOrderList = res.rows
        this.loading = false
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.task-card {
  margin: 10px
}

.userName {
  font-weight: bold;
  font-size: 15px;
}

.timestamp {
  color: dimgrey;
  text-align: left;
  margin-bottom: 8px;
  padding-top: 4px;
  font-size: 16px
}
</style>